<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>slice和splice的区别</title>
</head>
<body>
  <script>
    const arr = [0, 1, 2, 3, 4]
    arr.splice(0, 1)
    console.log('arr', arr) // [1, 2, 3, 4]
    const Arr = [0, 1, 2, 3, 4]
    Arr.slice(0, 1)
    console.log('Arr', Arr) // [0, 1, 2, 3, 4]

    // 俩者都是对数组进行截取，splice会改变原数组，
    // slice不会改变原数组

    // 用法: array.slice(start, end), start:必需，起始元素，使用负数可从结尾处规定位置
    const a = Arr.slice(-4)
    console.log(a) // [1, 2, 3, 4]
    // end: 可选。截止元素
    const b = Arr.slice(2, 4) // 截取第二位之后(不包含第二位)，到第四位(包含第四位)
    console.log('b', b)// [2, 3]

    // 2.splice的用法 array.splice(index, howmany,item1,...,itemX)
    // 参数:
    // index: 必需。整数，规定添加/删除项目的位置，使用负数可以从数组的结尾处规定位置
    // const c = Arr.splice(-4) 截取末尾4位
    // console.log('c', c) // [1, 2, 3, 4]

    // 从末尾往前5位，截取这4位
    const d = Arr.splice(-5, 4)
    console.log('d', d)// [0, 1, 2, 3]
    // howmany: 可选

    // item1,...,itemX: 可选。向数组添加新的项目。

    const ARR = [0,1,2,3,4]
    const e = ARR.splice(-5, 4, ...[5,6,7])
    console.log('e', e)// [0, 1, 2, 3] 不会改变e
    console.log('ARR', ARR) // [5, 6, 7, 4] 原数组被截取的位置，添加了新的项目
  </script>
</body>
</html>